<template>
  <div class="user-profile">
    <h1>个人信息</h1>
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :on-change="handleAvatarChange"
      :auto-upload="false"
    >
      <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
    <el-form :model="userInfo" label-width="100px" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model="userInfo.username" disabled />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="userInfo.nickname" />
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="userInfo.phone" />
      </el-form-item>
      <el-form-item label="电子邮箱">
        <el-input v-model="userInfo.email" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存修改</el-button>
        <el-button @click="resetForm">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { updateUserInfoService, userAvatarUpdateService, getUserInfoService } from '@/api/user.js'

const userInfo = ref({
  username: '',
  nickname: '',
  phone: '',
  email: '',
  avatar: ''
})

// 获取用户信息
const loading = ref(false)
const getUserInfo = async () => {
  loading.value = true
  try {
    const res = await getUserInfoService()
    userInfo.value = res.data
  } catch (e) {
    ElMessage.error('获取用户信息失败')
  } finally {
    loading.value = false
  }
}

getUserInfo();

// 上传头像
const handleAvatarChange = (file) => {
  const isImage = file.raw.type.includes('image')
  const isLt2M = file.raw.size / 1024 / 1024 < 2

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!')
    return false
  }

  const reader = new FileReader()
  reader.onload = async (e) => {
    userInfo.value.avatar = e.target.result
    try {
      const formData = new FormData()
      formData.append('avatar', file.raw)
      const res = await userAvatarUpdateService(formData)
      ElMessage.success(res.msg || '头像上传成功')
      await getUserInfo() // 重新获取用户信息
    } catch (error) {
      ElMessage.error('头像上传失败')
    }
  }
  reader.readAsDataURL(file.raw)
}

// 保存修改
const submitForm = async () => {
  let result = await updateUserInfoService(userInfo.value);
  ElMessage.success(result.msg ? result.msg : '修改成功');
}

// 取消修改
const resetForm = () => {
  userInfo.value = {
    username: 'admin',
    nickname: '管理员',
    phone: '13800138000',
    email: 'admin@example.com',
    avatar: ''
  }
}
</script>

<style scoped>
.user-profile {
  padding: 20px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>